<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from "vue";

const route = useRoute()
const router = useRouter()

const url = ref<string>();
const wordsInfo = ref<string>();
const forward = ref<string>();

url.value = String(route.query.imgUrl)
wordsInfo.value = String(route.query.wordsInfo)
forward.value = String(route.query.forward)

if (url.value === 'img') {
    url.value = require('@/assets/user/login_head.png');
}

// 监听日期渲染
watch(() => route.query, (newValue) => {
    url.value = String(newValue.imgUrl);

    if (url.value === 'img') {
        url.value = require('@/assets/user/login_head.png');
    }
    wordsInfo.value = String(newValue.wordsInfo)
    forward.value = String(newValue.forward)
})

function goToBack() {
    router.push({ name: 'home' });
}

function goToShare() {
    router.push({ name: 'share' });
}
function goToSave() {
    router.push({ name: 'save' });
}

function goToAlterImg() {
    router.push({ name: 'alter-img' });
}

</script>

<template>
    <div class="h-screen">
        <div>
            <div class="p-5 flex items-center ">
                <img class="w-6 h-10" src="@/assets/card/h5_qr_back.png" alt="back" @click="goToBack">
                <div class="text-center text-2xl w-11/12 ">小记</div>
            </div>
            <div class="relative">
                <div class="absolute inset-x-64 inset-y-32 text-center">
                    <img class="w-24 h-24 ml-8 mb-3" src="@/assets/card/change_pic.png" alt="img" @click="goToAlterImg">
                    <div class="text-gray-100">点击更改图片</div>
                </div>
                <img class="h-2/5" :src="url" alt="img">
            </div>
            <div class="flex justify-between items-center p-8 ">
                <div class="flex items-center bg-gray-100 px-5 py-2 rounded-full ">
                    <img class="w-6 h-6 mr-2 " src="@/assets/card/located_icon.png" alt="img" />
                    <div class="text-gray-400 text-xs ">地球</div>
                </div>
                <div class="text-gray-400">{{ wordsInfo }}</div>
            </div>
            <div class="px-14"> {{ forward }}</div>
            <div class=" absolute bottom-16 inset-x-48 flex">
                <img class="w-28 h-28 mr-12 " src="@/assets/card/save_icon.png" alt="img" @click="goToSave" />
                <img class="w-28 h-28 " src="@/assets/card/share_icon.png" alt="img" @click="goToShare" />
            </div>
        </div>

        <router-view v-slot="{ Component, route }">
            <transition name="scroll-router">
                <component :is="Component" :key="route.path" />
            </transition>
        </router-view>
    </div>
</template>